<template>
	<div class="container flex-col">
		<div class="pd flex-grow-0">请确认身份信息</div>
		<div class="flex-grow-1 bg-white">
			<div class="view flex-row flex-y-center pd bd-bottom">
				<div class="flex-grow-0 xingming">姓名</div>
				<div class="line flex-grow-0 mg-r-l"></div>
				<input class="flex-grow-1" placeholder="请填写本人姓名" v-model="xingming"/>
			</div>
			<div class="view flex-row flex-y-center pd bd-bottom">
				<div class="flex-grow-0 xingbie xingming">姓别</div>
				<div class="line flex-grow-0 mg-r-l"></div>
				<div class="flex-grow-1" @click="xingbieSelect">{{xingbie}}</div>
				<van-icon name="arrow"  class="flex-grow-0"/>
			</div>
			<div class="view flex-row flex-y-center pd bd-bottom">
				<div class="flex-grow-0 xingbie xingming">生日</div>
				<div class="line flex-grow-0 mg-r-l"></div>
				<div class="flex-grow-1"  @click="showDatePiker">{{shengri | formatDate}}</div>
				<van-icon name="arrow"  class="flex-grow-0"/>
			</div>
			<div class="view flex-row flex-y-center pd bd-bottom">
				<p class="flex-grow-0 shouji">手机号码</p>
				<div class="line flex-grow-0 mg-r-l"></div>
				<input class="flex-grow-1" placeholder="请填写本人手机号码" v-model="xingming"/>
			</div>
			<div class="view flex-row flex-y-center pd bd-bottom">
				<div class="flex-grow-0 xingbie shouji">验证码</div>
				<div class="line flex-grow-0 mg-r-l"></div>
				<input class="flex-grow-1" placeholder="输入验证码" v-model="xingming"/>
				<div class="btn flex-grow-0">获取验证码</div>
			</div>
			<div class="view flex-row flex-y-center pd">
				<van-checkbox v-model="checked">已经阅读并且同意新版</van-checkbox><span class="moneyColor">【分销赚钱规则】</span>
			</div>
			<button class="submitBtn mg-t pd" :disabled="!checked">确认提交</button>
		</div>
		<van-actionsheet v-model="show" title="选择性别">
		<van-picker :columns="columns" @change="onChange" />
		</van-actionsheet>

		 <van-datetime-picker  v-model="currentDate" type="date" confirm-button-text="确认"  v-if="showDataPiker" @confirm="confirm"/>
		
	</div>
</template>
<script>
	export default({
		data(){
			return{
				columns:["男士","女士"],
				checked:false,
				xingbie:"请选择",
				show:false,
				showDataPiker:false,
				xingming:"",
				shengri:new Date(),
				currentDate:new Date()
			}
		},
		methods:{
			xingbieSelect(){
			 this.xingbie = this.columns[0]
              this.show = true;
			},
			onChange(picker, value, index){
				 this.xingbie = this.columns[index]
			},
			showDatePiker(){
				this.showDataPiker = true;
			},
			confirm(e){
				this.shengri = e;
				this.showDataPiker = false;
			
			}
		}

	})
</script>
<style lang="less" scoped>
.shouji{
		width:3rem;
}
.btn{
	color:#F75B93;
	font-size:.5rem;
	border:1px solid #F75B93;
	width:3.5rem;
	text-align:center;
}
.xingming{
	width:3rem;
	text-align:right;
	word-spacing: 10px;
	letter-spacing:.8rem;
}
.line{
	height:.8rem;
	width:1px;
	background-color:#969696;
}
input{
	border:none;
}
.submitBtn{
	width:80%;
	border:none;
	background-color:#F75B93;
	color:#fff;
	margin-left:10%;
	border-radius:5px;
}
.submitBtn:disabled{
	background-color:#eee;
}
</style>